<template>

  <el-card class="page-tooles">
    <el-row type="flex" justify="space-between" align="middle">
      <el-col>
        <!-- 前插槽 -->
        <div v-if="showBefore" class="before">
          <!-- 图标随着before显示或隐藏 -->
          <i class="el-icon-info" />
          <slot name="before" />

        </div>

      </el-col>
      <el-col>
        <!-- 后插槽 -->

        <el-row type="flex" justify="end">
          <slot name="after" />
        </el-row>
      </el-col>
    </el-row>
  </el-card>

</template>

<script>
export default {
  props: {
    showBefore: {
      default: false,
      type: Boolean
    }
  }
}
</script>

<style lang="scss">
.page-tooles {
  .el-card__body {
    padding:10px 20px;
  }
    margin: 10px 0;
    .before {
        line-height: 34px;
 i {
        margin-right: 5px;
        color: #409eff;
    }
        display: inline-block;
    padding: 0 10px;
    border-radius: 3px;
    border: 1px solid rgba(145,213,255,1);
    background: rgba(230,247,255,1);
}
    }

</style>
